.dropzone {
  border-width: 1px;

  &.stand-alone {
    width: calc(100% - 20px);
    height: 100px;
    margin: 10px;
    border-radius: 5px;
    border-style: dashed;
    border-color: $gray;
  }

  &.wrapper {
    border-style: none;
  }

  &.hover-click {
    border-style: solid;
    border-color: $link-color;
  }

  &.hover-valid {
    border-style: solid;
    border-color: $brand-success;
    > * {
      pointer-events: none;
    }
  }

  &.hover-invalid {
    border-style: solid;
    border-color: $brand-warning;
    > * {
      pointer-events: none;
    }
  }

  .dropzone-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    svg {
      width: 3em;
      height: 3em;
      color: $gray-dark;
    }
  }
}

.drag-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}
